<template>
	<view>
		<view v-if="selectFlag" class="header">
			<view @click="selectd(index)" class="tabs" :class="index == current ? 'selectdTabs' : ''" v-for="(item, index) in tabs" :key="index">{{ item }}</view>
		</view>
		<view v-if="selectFlag" class="line"></view>
		<u-empty text="没有优惠券" mode="coupon" :show="couponShow"></u-empty>
		<view class="container" v-show="!couponShow">
			<view v-show="current == 0" class="coupon" :class="item.statusname == '已过期' ? 'bg' : 'blueBg'" v-for="(item, index) in list" :key="'a' + index">
				<view @click="selectCouponHandle(item)">
					<view class="coupon_left">
						<view class="coupon_left_number">
							<text>￥</text>
							<text>{{ item.price }}</text>
						</view>
						<view class="coupon_left_type">{{ item.title }}</view>
					</view>
					<view class="coupon_right">
						<view class="coupon_right_number">{{ item.desc }}</view>
						<view class="coupon_right_date">
							<text style="display: inline-block;width: 100%;">{{ formatDate(item.end_time) }}前有效</text>
							<view v-if="item.lastmsg == '即将过期'" class="waringBg">即将过期</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="current == 1" class="coupon blueBg" v-for="(item, index) in list" :key="'b' + index">
				<view class="coupon_left">
					<view class="coupon_left_number">
						<text>￥</text>
						<text>{{ item.price }}</text>
					</view>
					<view class="coupon_left_type">{{ item.title }}</view>
				</view>
				<view class="coupon_right">
					<view class="coupon_right_number">{{ item.desc }}</view>
					<view class="coupon_right_date">
						<text style="display: inline-block;width: 100%;">{{ formatDate(item.end_time) }}前有效</text>
					</view>
				</view>
			</view>
			<view v-show="current == 2" class="coupon bg" v-for="(item, index) in list" :key="'c' + index">
				<view class="coupon_left">
					<view class="coupon_left_number">
						<text>￥</text>
						<text>{{ item.price }}</text>
					</view>
					<view class="coupon_left_type">{{ item.title }}</view>
				</view>
				<view class="coupon_right">
					<view class="coupon_right_number">{{ item.desc }}</view>
					<view class="coupon_right_date">
						<text style="display: inline-block;width: 100%;">{{ formatDate(item.end_time) }}前有效</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { selectCoupon } from '@/api/user/order/subscribeOrder.js';
import { myCoupon } from '@/api/user/userCenter/myWallet/myWallet.js';
export default {
	data() {
		return {
			current: 0,
			couponShow: true,
			selectFlag: true,
			page: 1,
			tabs: [
				'未使用', //0
				'已使用', //1
				'已过期' //2
			],
			money: null,
			id: null,
			list: [
				// {
				// 	add_time: 1584691052,
				// 	desc: '单笔满50.00使用仅限科目二使用',
				// 	end_time: '2020-03-25 15:57:32',
				// 	price: '20.00',
				// 	status: 'normal',
				// 	statusname: '已过期',
				// 	subjectstitle: '科目二',
				// 	title: '通用券',
				// 	use_min_price: '50.00'
				// }
			]
		};
	},
	async onLoad(options) {
		if (options.money && options.id) {
			this.selectFlag = false;
			let data = await selectCoupon(options.money, options.id);
			this.money = options.money;
			this.id = options.id;
			this.list = data.data.coach.data;
		} else {
			let res = await myCoupon(1, this.page);
			this.list = res.data.data;
		}
	},
	onShow() {
		// this.DateDiff('2020-4-8', '2020-4-10');
	},
	watch: {
		list(val) {
			if (!val.length) {
				this.couponShow = true;
			} else {
				this.couponShow = false;
			}
		}
	},
	onReachBottom() {
		this.loadMore();
	},
	methods: {
		async selectd(index) {
			uni.showLoading({
				title: '加载中'
			});
			let res = await myCoupon(index + 1);
			this.list = res.data.data;
			uni.hideLoading();
			this.current = index;
		},
		selectCouponHandle(item) {
			if (!this.selectFlag) {
				uni.$emit('coupon', {
					couponId: item.usercouponid,
					price: item.price
				});
				uni.navigateBack({
					delta: 1
				});
			}
		},
		async loadMore() {
			let res;
			if (this.money && this.id) {
				res = await buybalanceorder(++this.page);
			} else {
				res = await myCoupon(1, this.page);
			}
			this.getTeacherList(res);
		},
		getTeacherList(res) {
			if (this.money && this.id) {
				if (this.page == 1) {
					this.list = res.data.coach.data;
				} else {
					this.list = this.list.concat(res.data.coach.data);
				}
			} else {
				if (this.page == 1) {
					this.list = res.data.data;
				} else {
					this.list = this.list.concat(res.data.data);
				}
			}
		},
		formatDate(date) {
			let newDate = date.replace(/\-/g, '/');
			var time = new Date(newDate); //将日期写在这。
			var y = time.getFullYear(); //获取年
			var m = time.getMonth() + 1; //获取月
			m = m < 10 ? '0' + m : m; //判断月是否大于10
			var d = time.getDate(); //获取日
			d = d < 10 ? '0' + d : d; //判断日期是否大10
			return y + '-' + m + '-' + d; //返回时间格式
		}
		// DateDiff(sDate1, sDate2) {
		// 	//sDate1和sDate2是2006-12-18格式
		// 	var aDate, oDate1, oDate2, iDays;
		// 	aDate = sDate1.split('-');
		// 	oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]); //转换为12-18-2006格式
		// 	console.log(oDate1);
		// 	aDate = sDate2.split('-');
		// 	oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
		// 	iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
		// 	console.log(iDays);
		// 	return iDays;
		// },
		// overdue(item) {
		// 	var curTime = new Date();
		// 	var endtime =item.end_time
		// 	//把字符串格式转化为日期类
		// 	console.log(curTime);
		// 	endtime = endtime.replace(new RegExp('-', 'gm'), '/');
		// 	console.log(endtime);
		// 	if (curTime < endtime) {
		// 		return true;
		// 	} else {
		// 		return false;
		// 	}
		// },
		// differenceDate(item) {
		// 	var date = new Date();
		// 	var endDate = item.end_time;
		// 	var startDate = date.getTime();
		// 	endDate = endDate.replace(new RegExp('-', 'gm'), '/');
		// 	var endDateM = new Date(endDate).getTime(); //得到毫秒数
		// 	if (endDateM - startDate <= 604800000 && endDateM - startDate > 0) {
		// 		return true;
		// 	} else {
		// 		return false;
		// 	}
		// }
	}
};
</script>

<style lang="scss">
@import './css/discount.scss';
</style>
